import * as React from 'react';
import { escape } from '@microsoft/sp-lodash-subset';
// import { Link } from '@microsoft/office-ui-fabric-react-bundle';
import { dynamicsService } from "../../../../services/services";
import { Layout, Card, Menu } from 'antd';
const { Header, Sider, Content } = Layout;
import { Link } from 'office-ui-fabric-react';
import { Nav, INavLink, INavStyles, INavLinkGroup } from 'office-ui-fabric-react/lib/Nav';
import Api from '../config/api';
import axios from 'axios';
interface IProps {
  username: string;
  linkkey: string;
}
interface IState {
  selectlinkkey: string;
  count: number;
}

const navStyles: Partial<INavStyles> = {
  root: {
    width: 208,
    // height: 1000,
    boxSizing: 'border-box',
    border: '1px solid #eee',
    overflowY: 'auto',
  },
};
const PATH_NAME = window.location.hash.slice(1).split('/')[1];
const navLinkGroups = [
  {
    name: '工作台',
    url: '/Dashboard',
    key: 'Dashboard',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'Dashboard' ? 'icon-gongzuotai-a' : 'icon-gongzuotai')
    },
    isSelected: true
  }, {
    name: '文档库',
    url: '/DocumentLibrary',
    key: 'DocumentLibrary',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'DocumentLibrary' ? 'icon-wdk-a' : 'icon-wdk')
    },
  }, {
    name: '新合同',
    url: '/AddContractNo',
    key: 'AddContractNo',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'AddContractNo' ? 'icon-xht-a' : 'icon-xht')
    },
  }, {
    name: '新合同版本号',
    url: '/AddContractVersion',
    key: 'AddContractVersion',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'AddContractVersion' ? 'icon-xhtbbh-a' : 'icon-xhtbbh')
    },
  }, {
    name: '规章制度',
    url: '/Regulations',
    key: 'Regulations',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'Regulations' ? 'icon-gzzd-a' : 'icon-gzzd')
    },
  }, {
    name: '规章制度版本号',
    url: '/RegulationsVersion',
    key: 'RegulationsVersion',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'RegulationsVersion' ? 'icon-gzzdbbh-a' : 'icon-gzzdbbh')
    },
  }, {
    name: '案件管理',
    url: '/CaseManagement',
    key: 'CaseManagement',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'CaseManagement' ? 'icon-ajgl-a' : 'icon-ajgl')
    },
  }, {
    name: '合同检索和导出',
    url: '/SearchExportContract',
    key: 'SearchExportContract',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchExportContract' ? 'icon-htjs-a' : 'icon-htjs')
    },
  }, {
    name: '规章检索与导出',
    url: '/SearchRegulations',
    key: 'SearchRegulations',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchRegulations' ? 'icon-gzzdjs-a' : 'icon-gzzdjs')
    },
  }, {
    name: '案件检索与导出',
    url: '/SearchCase',
    key: 'SearchCase',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchCase' ? 'icon-ajgljs-a' : 'icon-ajgljs')
    },
  },
  {
    name: '合同申请书文件检索',
    url: '/SearchExportFile',
    key: 'SearchExportFile',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchExportFile' ? 'icon-htwjjs-a' : 'icon-htwjjs')
    },
  },
  {
    name: '规章申请书文件检索',
    url: '/SearchApplyRegulationsFile',
    key: 'SearchApplyRegulationsFile',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchApplyRegulationsFile' ? 'icon-gzzdwjjs-a' : 'icon-gzzdwjjs')
    },
  },
  {
    name: '合同文件检索',
    url: '/SearchContract',
    key: 'SearchContract',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchContract' ? 'icon-htwjjs-a' : 'icon-htwjjs')
    },
  },
  {
    name: '规章制度文件检索',
    url: '/SearchRegulationsFile',
    key: 'SearchRegulationsFile',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchRegulationsFile' ? 'icon-gzzdwjjs-a' : 'icon-gzzdwjjs')
    },
  },
  {
    name: '案件文件检索',
    url: '/SearchCaseFile',
    key: 'SearchCaseFile',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchCaseFile' ? 'icon-ajwjjs-a' : 'icon-ajwjjs')
    },
  },
  {
    name: '全文件检索',
    url: '/SearchFile',
    key: 'SearchFile',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'SearchFile' ? 'icon-qwjs-a' : 'icon-qwjs')
    },
  },
  {
    name: '测试功能页面（非业务代码）',
    url: '/MyTestPage',
    key: 'MyTestPage',
    iconProps: {
      iconName: 'iconfont',
      className: 'iconfont ' + (PATH_NAME === 'MyTestPage' ? 'icon-gongzuotai-a' : 'icon-gongzuotai')
    },
  }
];
export default class LayoutDom extends React.Component<{}, any> {
  // 构造函数
  constructor(props: {}) {
    super(props);
    // 数据绑定
    this.state = {
      selectlinkkey: "apply",
      pathname: window.location.hash.slice(1).split('/')[1] ? window.location.hash.slice(1).split('/')[1] : 'Dashboard', // 当前页面的hash值
    };
  }
  
  //动态更新绑定数据
  public async componentDidMount() {
    window.addEventListener('hashchange', (e) => {
      this.setState({
        pathname: window.location.hash.slice(1).split('/')[1] ? window.location.hash.slice(1).split('/')[1] : 'Dashboard'
      });
    });
    this.getRole()
    // axios.post('https://login.microsoftonline.com/extSTS.srf').then(res => {
    //   
    //   
    // })
    //dynamicsService.getAccessToken()
  }

  private async getRole() {
    // let res: any[] = await Api._getListData({ListGUID:'EA490E60-B7C2-4110-B1E2-AC4C34E5561B'});
    // // let res: any[] = await Api.GetListItemsByListGUID('5a41afda-66b2-4740-b5f3-04b58dc4c30e');
    // 
  }

  public render(): React.ReactElement<{}> {
    return (
      <Sider
                style={{
                  overflow: 'auto',
                  height: '100%',
                  left: 0,
                  top: 0,
                  bottom: 0,
                }}
              >
                <Menu mode="inline" defaultSelectedKeys={['DocumentLibrary']}>
                    <Menu.Item key="DocumentLibrary">
                        <Link to="/DocumentLibrary">
                          Navigation One
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="AddContractNo">
                        <Link to="/AddContractNo">
                          Navigation One
                        </Link>
                    </Menu.Item>
                    
                </Menu>
              </Sider>
      // <div className="layout_div">
      //   <Link rel="stylesheet" type="text/css" href={require("../pages/Layout.css")}></Link>
      //   <Nav
      //     onLinkClick={() => this._onLinkClick}
      //     initialSelectedKey="apply"
      //     ariaLabel="Nav basic example"
      //     styles={navStyles}
      //     groups={navLinkGroups}
      //     className="layout_nav"
      //     selectedKey={this.state.pathname}
      //   />
        
      // </div>
    );
  }


  public async _onLinkClick(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) {
    if (item) {
      await this.setState({
        pathname: item.key
      });
      
    }
  }
}
